<template>
    <div class="box">
      <JsContentTitle
        :pageTitle="state.pageTitle"
        :buttonData="state.buttonData"
      ></JsContentTitle>
      <div class="contentView">
        <JsTable
          :toolBar="state.toolBar"
          :total="state.totalCount"
          :dataSource="state.dataSource"
          :columns="state.columns"
          :refresh="state.refresh"
          @search="searchEvent"
        >
        <template #borrowed="scoped">
          <span>{{ scoped.row.borrowed==true ? '已借出' : '未借出' }}</span>
        </template>

        </JsTable>
      </div>
      
      <el-dialog
        v-model="dialogVisible"
        title="借书"
        width="500"
        :before-close="handleClose"
    >
        <span>确认借阅？</span>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="sure"> 确认 </el-button>
        </div>
        </template>
      </el-dialog>
    </div>
  </template>

  <script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { getBookList, borrowBook } from '@/api/xinrn'
//控制是否可见
  let dialogVisible = ref(false)
  const handleClose = () =>{
    dialogVisible.value = false
  }
//
  const book = ref(null) as any
//控制
  const sure = () =>{
    borrowBook(book.value.id).then((res:any) => {
      console.log(res)
      dialogVisible.value = false
    }).catch(error => {
    console.error('请求失败:', error.response.data);  // 打印详细的错误信息
    })
  }
//生命周期钩子
  onMounted(() => {
    state.value.refresh = 1//刷新列表执行searchEvent方法
  })
//搜索书籍
  const searchEvent = (params: any) => {
      //params包含page、pagesize、state.value.toolBar.form内容
    console.log(params)
    let config = {
      pageNum:params.page,
      pageSize:params.pageSize,
      bookName:params.bookname,
      author:params.author
    }
    getBookList(config).then((res:any) => {
      console.log(res)
      state.value.dataSource = res.data.data
      state.value.totalCount = res.data.total
      state.value.refresh = 0 //重新置成0，否则下次刷新不执行
    })
  } 
//借阅书籍
  const borrowbookEvent = (row: any) => {
    console.log(row)
    book.value = row
    dialogVisible.value = true
  }
//重置按钮
  const resetEvent = () => {
    const newForm: {[key: string]: string} = {};  // 使用类型断言
    for (const key in state.value.toolBar.form) {
      newForm[key] = '';  // 创建一个新的表单对象并设置所有字段为空
    }
    state.value.toolBar.form = newForm;  // 替换旧表单对象以确保响应性
    state.value.refresh = 1;  // 触发搜索事件
  }
  
  const state = ref({
    buttonData: [],
    pageTitle: '借阅书籍',

    refresh: 0,
    totalCount: 0,
    columns: {
      props: [
        {
          name: '书名',
          key: 'name',
        },
        {
          name: '作者',
          key: 'author',
        },
        {
          name: '简介',
          key: 'synopsis',
        },
        {
          name: '出版时间',
          key: 'year_publication',
        },
        {
          name: '借阅状态',
          key: 'borrowed',
        },
      ],
      options: {
        width:'auto',
        btns: [
          {
            label: '借阅书籍',
            key: 'borrow',
            type: 'warning',
            event: borrowbookEvent,
          },

        ],
      },
    },
    dataSource: [],
    toolBar: {
      form: {
        bookname: '',
        author: '',
      },
      input: [
        {
          label: '书名',
          key: 'bookname',//这是用于工具栏表单的字段
          placeholder: '请输入',
          el: 'input',
        },
        {
          label: '作者名',
          key: 'author',
          placeholder: '请输入',
          el: 'input',//下拉框
        },

      ],
      btns: [
        {
          label: '查询',
          icon: 'Search',
          event: searchEvent,
        },
        {
          label: '重置',
          event: resetEvent,
        },
      ],
    },
  } as any)
  </script>
  
  <style lang="scss" scoped>
  *::-webkit-scrollbar {
    display: none;
    width: 10px;
  }
  .box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    .contentView {
      background-color: white;
      border-radius: 5px;
      height: calc(100vh - 144px);
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  </style>
  